<template>
    <el-card shadow="never" class="aui-card--fill">
       <div class="container">
        <div class="handle-box">
          <el-button size="mini" @click="deleteComplainList()" type="danger" icon="el-icon-delete">批量删除</el-button>
          <el-button size="mini" @click="addDialog = true" type="primary" icon="el-icon-plus">我要投诉</el-button>
          <el-dialog title="添加投诉" :visible.sync="addDialog" width="600px">
            <el-form :model="dataForm">
                <el-form-item label="物业管理员编号" prop="managerId">
            <el-select v-model="dataForm.managerId" placeholder="物业管理员编号">
              <el-option
                v-for="manager in managerList"
                :key="manager.id"
                :label="manager.id+'号负责人  '+manager.name"
                :value="manager.id"
              >
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="投诉内容" prop="content">
              <el-input type="textarea" v-model="dataForm.content" placeholder="投诉内容"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="memo">
                <el-input v-model="dataForm.memo" placeholder="备注"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addDialog = false">取 消</el-button>
              <el-button type="primary" @click="addComplain()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <!-- 方法分页dataShow   计算属性分页data（计算属性名） -->
        <el-table
        size="mini"
        border
    :data="dataShow"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      >
    </el-table-column>
    
    <el-table-column
      prop="id"
      label="投诉编号"
      
      align="center">
    </el-table-column>

    <el-table-column
      prop="managerId"
      label="管理员编号"
      
      align="center">
    </el-table-column>

    <el-table-column
      prop="content"
      label="投诉内容"
      
      align="center">
    </el-table-column>

    <el-table-column
      prop="chargeinfoTime"
      label="投诉时间"
      
      align="center">
    </el-table-column>

    <el-table-column
      prop="state"
      label="处理状态"
      
      align="center"
      :formatter="stateFormatter">
    </el-table-column>

    <el-table-column
      prop="memo"
      label="备注"
      
      align="center">
    </el-table-column>
    
    
    <el-table-column label="操作" align="center" width="220px">
      <template slot-scope="scope">
        <el-button size="mini" @click="getComplainById(scope.row.id)" type="primary" icon="el-icon-edit" circle></el-button>
        <el-dialog title="修改投诉" :visible.sync="updateDialog" width="600px">
            <el-form :model="dataForm1">
                <el-form-item label="物业管理员编号" prop="managerId">
            <el-select v-model="dataForm1.managerId" placeholder="物业管理员编号">
              <el-option
                v-for="manager in managerList"
                :key="manager.id"
                :label="manager.id+'号负责人  '+manager.name"
                :value="manager.id"
              >
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="投诉内容" prop="content">
              <el-input type="textarea" v-model="dataForm1.content" placeholder="投诉内容"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="memo">
                <el-input v-model="dataForm1.memo" placeholder="备注"></el-input>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="updateDialog = false">取 消</el-button>
              <el-button type="primary" @click="updateComplain()">确 定</el-button>
            </div>
          </el-dialog>
        <el-button size="mini" type="danger" @click="deleteComplain(scope.row.id,scope.row.state)" icon="el-icon-delete" circle></el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination" align="center">
    <el-pagination
    background
    @size-change="handleSizeChange" 
    @current-change="handleCurrentChange"
    layout="total, sizes, prev, pager, next, jumper"
    :page-size="pageSize"
    :current-page="currentPage"
    :page-sizes="[10, 20, 50]"
    :total="total">
  </el-pagination>
  </div>
    </el-card>
</template>

<script>
export default {
    data () {
    return {
      inputId:'',
      dataForm:{
        id: '',
        ownerId: '',
        managerId: '',
        content: '',
        chargeinfoTime: '',
        state: '',
        memo: '',
        creator: '',
        createTime: '',
        updator: '',
        updateTime: ''
      },
      dataForm1:{
        id: '',
        ownerId: '',
        managerId: '',
        content: '',
        chargeinfoTime: '',
        state: '',
        memo: '',
        creator: '',
        createTime: '',
        updator: '',
        updateTime: ''
      },
      ownerId:0,
      //负责人列表
      managerList:[],
      complainList:[],
     
      // 分页
          totalPageData: [],  // 分页数据(全部数据已经分好页)
          pageNum: 1,         // 共几页
          pageSize: 10,        // 每页显示数量
          currentPage: 1,     // 当前显示页码
          total: 1,           // 总共多少条数据
          dataShow: [],        // 当前页要显示的数据
          //批量删除数组
          multipleSelection: [],
          //添加弹窗
          addDialog:false,
          //修改弹窗
          updateDialog:false,
          //批量删除key
          deleteIsBatchKey:'id'
    }
  },
  methods:{
    stateFormatter(row) {
        var state = row.state
        if(state == 0){
          return '未处理'
        }else if(state == 1){
          return '已处理'
        }
      },
    //获取当前业主的姓名
    // getOwnerNameByOwnerId() {
    //   this.$http.delete(`/eightapp/eicomplaininfo/deleteComplainById/`+this.ownerId)
    //   .then(({data:res}) =>{
    //     this.dataForm.updator
    //   })
    // },

    //删除
    deleteComplain(id,state) {
      this.$confirm('是否进行删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          if(state == 0) {
            this.$http.delete(`/eightapp/eicomplaininfo/deleteComplainById/`+id)
          .then(({data:res}) =>{
            this.getComplainListByOwnerId()
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          })
          .catch(() => {
            this.$message({
            type: 'danger',
            message: '删除失败!'
          })
          })
          }else if(state == 1) {
            this.$notify({
            title: '警告',
            message: '投诉已处理，不可删除',
            type: 'warning'
          });
          }
          });
    },
    //批量删除
    //getStateListById
    deleteComplainList() {
      this.$confirm('是否进行批量删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          this.$http.get(`/eightapp/eicomplaininfo/getStateListById/`+this.multipleSelection.map(item => item[this.deleteIsBatchKey]))
          .then(({data:res}) =>{
            if(res.data == 0) {
              this.$http.delete(`/eightapp/eicomplaininfo/deleteComplainList/`+this.multipleSelection.map(item => item[this.deleteIsBatchKey]))
              .then(({data:res}) =>{
                this.getComplainListByOwnerId()
                this.$message({
                type: 'success',
                message: '删除成功!'
              });
              })
              .catch(() => {
                this.$message({
                type: 'danger',
                message: '删除失败!'
              })
              })
            }else if(res.data == 1) {
              this.$notify({
              title: '警告',
              message: '包含已处理的投诉，不可删除',
              type: 'warning'
            });
            }
          });
          })
          
          
    },
    //根据id获取投诉信息
    getComplainById(id) {
      this.$http.get(`/eightapp/eicomplaininfo/getComplainByid/` + id)
      .then(({data:res}) =>{
        this.dataForm1=res.data
        this.updateDialog=true
      })
    },
    //修改投诉信息
    updateComplain() {
      if(this.dataForm1.state == 0) {
        this.$http.put(`/eightapp/eicomplaininfo/`,this.dataForm1)
        .then(({data:res}) =>{
          this.updateDialog=false
          this.getComplainListByOwnerId()
        })
      }else if(this.dataForm1.state == 1) {
        this.$notify({
          title: '警告',
          message: '投诉已处理，不可修改',
          type: 'warning'
        });
      }
    },
    //添加投诉
    addComplain() {
      this.dataForm.ownerId=this.ownerId
      this.dataForm.state=0
      this.dataForm.updator="老八"
      this.getCurrentTime();
      this.$http.post(`/eightapp/eicomplaininfo/`,this.dataForm)
      .then(({data:res}) =>{
        console.log("success");
        this.addDialog = false;
        this.getComplainListByOwnerId();
      })
    },
    getCurrentTime() {
              var date = new Date();
      var year = date.getFullYear(); //月份从0~11，所以加一
      var dateArr = [date.getMonth() + 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds()];
      for(var i=0;i<dateArr.length;i++){
        if (dateArr[i] >= 1 && dateArr[i] <= 9) { 
            dateArr[i] = "0" + dateArr[i];
        }
      }
      var strDate = year+'-'+dateArr[0]+'-'+dateArr[1]+' '+dateArr[2]+':'+dateArr[3]+':'+dateArr[4];
      this.dataForm.chargeinfoTime=strDate
    },
    //获取负责人编号
    getManagerList(){
      this.$http.get(`eightapp/eimanagerinfo/getmanagerlist`)
      .then(({data:res}) =>{
        this.managerList=res.data;
      })
    },
    //获取表格数据
    getComplainListByOwnerId() {
      this.complainList=[]
      
      this.$http.get(`eightapp/eicomplaininfo/getComplainListByownerId/` + this.ownerId)
          .then(({data:res}) =>{
            this.complainList=res.data
          
            this.total=res.data.length
            this.Page()
          })
          .catch(() => {
            
          })
    },
          //分页
      Page() {
        // 计算页数，根据后台数据的条数和每页要显示的数量算出一共多少页，得0时设为1    
            if(this.complainList.length > 1) {
                this.pageNum = Math.ceil(this.complainList.length / this.pageSize) || 1;
                // console.log("总页数：" + this.pageNum);
            }
            //数据分组
            for (let i = 0; i < this.pageNum; i++) {
                // 每页相当于一个数据，例如：[[],[],[]]
                // 根据每页显示数量，将后台的数据分割到每一页，假设pageSize为5，则第一也为1-5条slice(0,5),slice(5,10)...
                // slice()	选择数组的一部分，并返回新数组。
                // 起始索引：(当前页码-1)*每页显示的记录数    ，结束索引：当前页码*每页显示的记录数
                this.totalPageData[i] = this.complainList.slice(this.pageSize * i, this.pageSize * (i+1));
            }
            // 获取到数据后显示第一页内容，数组下标是从0开始的，这里一定 要减去1，不然会丢失一组数据
            this.dataShow = this.totalPageData[this.currentPage - 1];
      },
      //修改每页显示数量
      handleSizeChange(val) {
        this.pageSize = val;
        // console.log("一页显示多少条：" + val);
        // 重新计算页数并分组
        this.Page();
      },
      //切换页面数
      handleCurrentChange(val) {
        this.currentPage = val;
        // 注意数组是从0开始，页码别忘了减去1
        this.dataShow = this.totalPageData[val - 1];
        // console.log("第几页： " + val)
      },
      //多选
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
  },
  
  created() {
    this.ownerId = sessionStorage.getItem("OwnerId");
    this.getComplainListByOwnerId();
    this.getManagerList();
    
    
  }
}
</script>

<style scoped>

</style>
